<template>
    <span v-if="fileId != null" class="file-download-span">
      <el-tooltip effect="dark" :content="tooltipContent" placement="top-start">
        <el-button class="file-download-btn">
          <img @click="fileDownloadLinkClick" src="img/download-blue.png" class="file-download-img" />
          <!-- <el-tooltip :title='fileNameTemp'> -->
            <a 
                ref="fileDownloadLink" 
                id="fileDownloadLink" 
                :style='{"max-width": 100+"px"}' 
                :href="fileDownloadApiUrl + fileId"
            >{{fileNameTemp}}</a>
          <!-- </el-tooltip> -->
        </el-button>
      </el-tooltip>
    </span>
</template>

<script>
    import {systemUrls} from '@/const/apiUrl'
    import {getfileinfo} from "@/api/system";

    /**
     * 下载文件
     */
    export default {
        name: "fileDownload",
        data: function(){
            return {
                //文件下载接口地址
                fileDownloadApiUrl:systemUrls.downloadUrl,
                fileNameTemp: null,
                tooltipContent: "下载文件"
            }
        },
        props:{
            //文件id
            fileId: Number,
            //文件名（页面显示名称，下载的文件名为服务器设置的文件名）
            fileName: {
                type: String,
                default: '文件'
            },
            width: {
                default: 100,
            }
        },
        created() {
            this.init();
        },
        watch:{
            fileId(){
                this.init();
            }
        },
        methods:{
            init(){
                this.fileNameTemp = this.fileName;
                if(this.fileId != null && this.fileNameTemp == '文件'){
                    this.getFileName();
                }
            },
            getFileName(){
                getfileinfo(this.fileId).then((res) => {
                    let fileInfo = res.data.data;
                    if (fileInfo != null && fileInfo.fileFullName != null) {
                        this.fileNameTemp = fileInfo.fileFullName;
                        this.tooltipContent = this.tooltipContent + "：" + this.fileNameTemp;
                    }
                });
            },
            fileDownloadLinkClick(){
                this.$refs['fileDownloadLink'].click();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .file-download-span{
        margin-left: 10px;

        .file-download-btn{
            padding: 0 0 3px 0px;
            border: 0px solid #dcdfe6;

            .file-download-img{
                width: 23px;
                height:23px;
                position: relative;
                top: 6px;
            }
        }
    }
    

</style>
<style lang="stylus">
#fileDownloadLink {
        display inline-block
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>